<template>
    <div class="header" id="header">
        <div class="logo-left"><span>管理后台</span></div>
        <div class="random">
            <div class="logo">
                <div class="logo-right">
                    <span class="user-campus" v-if="user.userType == 0">超级管理员</span>
                    <span class="user-campus" v-if="user.userType == 1">{{user.cityName}}{{user.zoneName}}教育委员会</span>
                    <span class="user-campus" v-if="[2,3].includes(user.userType)">{{user.schoolName}}</span>
                </div>
            </div>

            <div class="user-info">
                <img src="../../assets/male.png" class="headImg">
                <span class="user-name">{{user.userName}} {{user.jobTitle}}</span>
                <span class="user-type">（{{type}}）</span>
            </div>
            <div class="logoout" @click="handleCommand('loginout')">
                <img src="../../assets/login_out.png">
                <span>退出</span>
            </div>
        </div>
    </div>
</template>
<script>
    import { mapState, mapActions } from "vuex";

    export default {
        data() {
            return {
                type: ""
            };
        },
        computed: mapState({ user: state => state.user }),
        mounted() {

            switch (this.user.userType) {
                case 0:
                    this.type = "超级管理员";
                    break;
                case 1:
                    this.type = "管理员";
                    break;
                case 2:
                    this.type = "校方";
                    break;
                case 3:
                    this.type = "教师";
                    break;
            }
        },
        methods: {
            ...mapActions(["SIGNOUT"]),
            handleCommand(command) {
                if (command == "loginout") {
                    this.$axios.post("/adminapi/v1/login/logout").then(response => {
                        if (response.data.error == 10000) {
                            this.SIGNOUT();
                            this.$router.push("/login");
                        }
                    });
                }
            }
        }
    };
</script>
<style>
    .header {
        position: fixed;
        box-sizing: border-box;
        width: 100%;
        height: 60px;
        font-size: 14px;
        line-height: 60px;
        color: #2d3243;
        background: #fff;
        font-family: "PingFangSC-Regular";
        cursor: pointer;
        z-index: 100000;
    }

    div.random {
        /* box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.5); */
        box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.12);
        overflow: hidden;
        height: 60px;
    }

    .header .logo {
        float: left;
        width: 40%;
        height: 60px;
        min-width: 420px;
        text-align: center;
        overflow: hidden;
    }

    .logo-left {
        width: 179px;
        height: 60px;
        float: left;
        border: 0;
        background: #333744;
    }

    .logo-left span {
        font-size: 24px;
        color: #03A9F4;
        font-family: "MF-MoDeng-Noncommercial-Regular";
        position: absolute;
        top: 30px;
        transform: translateY(-50%);
        left: 30px;
    }

    .logo-right {
        float: left;
        margin-left: 20px;
        height: 60px;
    }

    .logo-right .user-campus {
        display: inline-block;
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
    }

    .logoout {
        position: absolute;
        top: 0;
        right: 20px;
        height: 60px;
    }

    .logoout img {
        margin-top: 19px;
        float: left;
        width: 22px;
        height: 22px;
    }

    #header .head_img {
        width: 20px;
        height: 20px;
        margin-top: 20px;
    }

    .user-info {
        height: 60px;
        line-height: 1;
        display: inline-block;
        position: absolute;
        right: 70px;
        min-width: 148px;
    }

    img.headImg {
        width: 48px;
        height: 48px;
        position: absolute;
        top: 6px;
        left: 0;
    }

    .user-name {
        position: absolute;
        top: 12px;
        right: 0;
        width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
    }

    .user-type {
        position: absolute;
        bottom: 10px;
        right: 0;
        width: 100px;
        text-align: center;
        color: #707070;
        font-size: 12px;
    }
</style>